<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>请输入信息</title>
	<style type="text/css">
		span{
			color: red
		}
	</style>
	<script type="text/javascript">
		var isFormSubmit = false;	// 表单是否合法，如果合法则进行提交
		var xhr;
		
		function createXHR(){
			
			if(window.XMLHttpRequest){
				xhr = new XMLHttpRequest(); // FF,Chrome
			}else{
				xhr = new ActiveXObject();	// IE
			}
		}
		
		function checkUsername(username){
			
			createXHR();
			xhr.open("post", "CheckUsernameServlet?username="+username);
			xhr.onreadystatechange = checkUsernameCallback;
			xhr.send(null);
			document.getElementById('msg').innerHTML = '正在提交验证。。。';
		}
		
		function checkUsernameCallback(){
			
			if(xhr.readyState == 4 && xhr.status == 200){
				var text = xhr.responseText;
				if(text == 'true'){
					document.getElementById('msg').innerHTML = '该用户已注册，请更换用户名！';
				}else{
					document.getElementById('msg').innerHTML = '恭喜您，该用户名有效！';
					isFormSubmit = true;
				}
			}
		}
		
		function checkForm(){
			
			return isFormSubmit;
		}
	</script>
</head>
<body>
	<form action="user_insert_do.jsp" method="post" onsubmit="return checkForm()">
		雇员姓名：<input type="text" name="username" onblur="checkUsername(this.value)"><span id='msg'></span><br>
		雇员密码：<input type="password" name="password"><br>
		雇员性别：<input type="text" name="sex"><br>
		雇员年龄：<input type="text" name="age"><br>
		雇员生日：<input type="text" name="birthday"><br>
		<input type="submit" value="添加"><input type="reset" value="重置">
	</form>
</body>
</html>